iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0
Modern Web

弄點簡單的 Chrome Extension 讓生活更方便系列 第 2

Chrome Extension 02 – 在博客來搜尋書

  • 分享至 

  • xImage
  •  

有時候線上會丟書名跟作者,但是查詢時又要先開啟 Google 然後才到賣書的網站
為了讓自己省下一個小小的步驟,所以使用了 Chrome Extension 做了右鍵選單,直接打開網站

先建立 manifest.json 檔案

{
    "manifest_version" :2,
    "name" : "BookingSearch",
    "version" : "1.0",
    "description" : "博客來找書",
    "icons" :{
        "128" : "icon128.png",
        "48" : "icon48.png",
        "16" : "icon16.png"
    },
    "background" :{
        "scripts" :["eventPage.js"],
        "persistent" : false
    },

    "permissions" : [
        "contextMenus",
        "tabs"
    ]
}

"permissions" 是這個 Chrome Extension 允許的權限

  • contextMenus  - 右鍵選單
  • tabs - 允許開新分頁

由於右鍵選單並不需要頁面,但他需要常駐在背後執行的 js 檔案,故使用 background 執行一個 eventPage.js

  • title 的 %s 可以顯示選取的文字
  • contexts 可以帶入不同列舉 :  "all", "page", "frame", "selection", "link", "editable", "image", "video", "audio", "launcher", "browser_action", or "page_action"
var contextMenuItem = {
    "id" : "BookingSearch",
    "title" : "Booking Search : %s",
    "contexts" : ["selection"] 
};

chrome.contextMenus.create(contextMenuItem);

chrome.contextMenus.onClicked.addListener(function(clickData){
      //事件內容
    }
});

試著在博客來搜尋書,會發現網址列的規則如下
https://search.books.com.tw/search/query/key/{關鍵字}/cat/all

事件內容判斷 menuItemId 的 id 是不是 BookingSearch 後,帶入關鍵字,開啟新頁面 :

if(clickData.menuItemId=="BookingSearch"){
        var selection = clickData.selectionText;
var newUrl = "https://search.books.com.tw/search/query/key/"+ selection + "/cat/all" ;
chrome.tabs.create({ url: newUrl });

完整 eventPage.js 如下

var contextMenuItem = {
    "id" : "BookingSearch",
    "title" : "Booking Search : %s",
    "contexts" : ["selection"] 
};

chrome.contextMenus.create(contextMenuItem);

chrome.contextMenus.onClicked.addListener(function(clickData){
    if(clickData.menuItemId=="BookingSearch"){
        var selection = clickData.selectionText;
var newUrl = "https://search.books.com.tw/search/query/key/"+ selection + "/cat/all" ;
chrome.tabs.create({ url: newUrl });
    }
});

運行後,可以直接使用右鍵,進行搜尋
https://ithelp.ithome.com.tw/upload/images/20181017/200942236rUV3Fcnx0.png

然後會開啟新頁面,帶出搜尋結果 :
https://ithelp.ithome.com.tw/upload/images/20181017/20094223Njo8mu8gMP.png

感謝大家收看!


上一篇
Chrome Extension 01 - 前言 + HelloWorld
下一篇
Chrome Extension 03 – 警告 facebook 待太久
系列文
弄點簡單的 Chrome Extension 讓生活更方便30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言